<template>
  <div class="ent-card shadow-enterprise-md animate-fade-in">
    <div class="ent-card-header flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-primary-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
      <h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">自然语言查询</h2>
    </div>

    <div class="ent-card-body">
      <div class="relative">
        <div class="relative">
          <textarea
            v-model="query"
            @keydown.ctrl.enter="submitQuery"
            class="ent-input min-h-[120px] resize-none pl-10"
            placeholder="使用自然语言描述您的查询需求，例如：'显示所有客户的名字和邮箱'"
            :disabled="isSubmitting"
          ></textarea>
          <div class="absolute left-3 top-3 text-primary-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>

        <div class="absolute bottom-3 right-3 flex space-x-2">
          <button
            v-if="query.trim()"
            @click="clearQuery"
            class="ent-btn-ghost p-1"
            :disabled="isSubmitting"
            title="清空查询"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      <div class="mt-6 flex justify-between items-center">
        <div class="text-sm text-gray-500 dark:text-gray-400">
          使用自然语言描述您想要查询的数据
        </div>

        <button
          @click="submitQuery"
          class="ent-btn-primary"
          :disabled="!query.trim() || isSubmitting"
        >
          <span v-if="isSubmitting" class="flex items-center">
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            处理中...
          </span>
          <span v-else class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
            </svg>
            执行查询
          </span>
        </button>
      </div>
      
      <div class="mt-4 flex flex-wrap gap-2">
        <button 
          v-for="suggestion in suggestions" 
          :key="suggestion"
          @click="useSuggestion(suggestion)"
          class="ent-badge-blue cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
        >
          {{ suggestion }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'QueryInput',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    query: {
      type: String,
      default: ''
    }
  },
  emits: ['submit-query', 'update:query'],
  setup(props, { emit }) {
    const query = ref(props.query)
    const isSubmitting = ref(false)
    const suggestions = ref([
      '哪些国家的发票最多？',
      '哪个城市有最好的客户？',
      '谁是最好的客户？',
      '查询所有摇滚音乐听众的邮箱、姓名和流派，按邮箱排序',
      '谁在创作摇滚音乐？'
    ])

    watch(() => props.loading, (newValue) => {
      isSubmitting.value = newValue
    })

    watch(() => props.query, (val) => {
      query.value = val
    })

    watch(query, (val) => {
      emit('update:query', val)
    })

    const submitQuery = () => {
      if (query.value.trim() && !isSubmitting.value) {
        isSubmitting.value = true
        emit('submit-query', query.value)
      }
    }

    const clearQuery = () => {
      query.value = ''
    }

    const useSuggestion = (suggestion) => {
      query.value = suggestion
    }

    return {
      query,
      isSubmitting,
      suggestions,
      submitQuery,
      clearQuery,
      useSuggestion
    }
  }
}
</script>
